<template>
  <div class="productionManagement dis-f jc-sb">
    <div class="flex-1 pr-12">
      <div class="dis-f jc-sb">
        <con-box class="w-520 h-450" title="生产管理">
          <div class="dis-f fd-c jc-sb h-100p">
            <div class="h-136 production-top dis-f">
              <bar-progress :progress="production.dailyProductivity" title="生产品项达成率" />
              <div class="data">
                <div class="top">
                  <div class="value">{{ production.activeDayOut }}</div>
                  <div class="label">当日实际产量</div>
                </div>
                <div class="bottom">
                  <div class="value">{{ production.plannedOutputNum }}</div>
                  <div class="label">当日计划产量</div>
                </div>
              </div>
              <bar-progress
                :progress="production.monthlyProductivity"
                title="生产品项月累达成率"
                borderColor="border-green"
                innerCircleColor="inner-green"
              />
              <div class="data-right">
                <div class="top">
                  <div class="value">{{ production.activeMonthlyOut }}</div>
                  <div class="label">当月实际产量</div>
                </div>
                <div class="bottom">
                  <div class="value">{{ production.plannedOutputNumMonth }}</div>
                  <div class="label">当月计划产量</div>
                </div>
              </div>
            </div>
            <!-- <div class="h-92 dis-f jc-sb pl-26"> -->
            <!-- <div class="w-92 h-92">
                <img class="w-100p h-100p" src="@/assets/images/yyjx_icon_cl.png" alt="" />
              </div> -->
            <!-- <div class="flex-1 dis-f jc-sb fz-14 c-fff pl-30"> -->
            <!-- <div class="w-50p h-92 po-r">
                  <p class="lh-40px">当日实际产量(包)</p>
                  <div class="fw-700 fz-20 font-num">{{ production.activeDayOut }}</div>
                  <div class="po-a t-20 r-10 w-1 h-34 bgc-1a2f3d"></div>
                </div>
                <div class="w-50p po-r pl-20">
                  <p class="lh-40px">月产量(包)</p>
                  <div class="fw-700 fz-20 font-num">{{ production.activeMonthlyOut }}</div>
                </div> -->
            <!-- <div class="w-112 h-92">
                  <p class="lh-40px">年度产量(包)</p>
                  <div class="fw-700 fz-20 font-num">{{ production.activeYearOut }}</div>
                </div> -->
            <!-- </div> -->
            <!-- </div> -->
            <div class="h-220 po-r">
              <div class="po-a cur-p w-48 h-26 dis-f ai-c r-6 t--20 fz-14">
                <base-select v-model="selectedDate" :list="timeList" />
              </div>
              <div class="quality-management">
                <div class="percentage">
                  <div class="value">
                    <img src="@/assets/images/zhcc_icon_yshl.png" alt="" class="rotate" />
                    <span>{{ toMoney(throughRate) }}</span>
                    <span class="unit">%</span>
                  </div>
                  <title-item title="直通率" />
                </div>
                <data-list class="ml-20 mt-20" :list="qualityList" backgroundColor="green" />
              </div>
            </div>
          </div>
        </con-box>
        <con-box class="w-854 h-450" title="设备管理">
          <div class="dis-f jc-sb fd-c h-100p pt-10">
            <div class="flex-1">
              <div class="h-118 dis-f jc-sb pl-30">
                <div>
                  <div class="w-86 h-76 po-r">
                    <img class="w-100p h-100p" src="@/assets/images/zhcc_icon_cp.png" alt="" />
                    <div class="po-a text-center t-10 fz-18 c-fff fw-700 scale">
                      {{ sbObj.device && sbObj.device.faultRate }}%
                    </div>
                  </div>
                  <p class="fz-14 c-fff ta-c">故障率</p>
                </div>
                <div class="flex-1 dis-f jc-sb fz-14 c-fff pl-40">
                  <div class="w-128 h-92 po-r">
                    <p class="lh-40px">故障时间</p>
                    <div class="fw-700 fz-16 font-num mt-10">{{ sbObj.device && sbObj.device.faultTime }}</div>
                    <div class="po-a t-20 r-0 w-1 h-34 bgc-1a2f3d"></div>
                  </div>
                  <div class="w-106 po-r">
                    <p class="lh-40px">实际排产时间</p>
                    <div class="fw-700 fz-16 font-num mt-10">{{ sbObj.device && sbObj.device.schedulingTime }}</div>
                  </div>
                  <div class="h-80 dis-f">
                    <div class="w-220 h-100p pt-10">
                      <base-echarts :options="sbPieOptions" />
                    </div>
                    <div class="flex-1 dis-f">
                      <div class="item">
                        <div class="pic w-82 h-67 po-r">
                          <div class="po-a fz-16 t-14 text-center font-num">
                            {{ sbObj.device && sbObj.device.mtbf }}天
                          </div>
                          <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w-100p h-100p" />
                        </div>
                        <p class="fz-12 c-B9BCC1 mt-6">故障平均间隔时间</p>
                      </div>
                      <div class="item ml-30">
                        <div class="pic w-82 h-67 po-r">
                          <div class="po-a fz-16 t-14 text-center font-num">
                            {{ sbObj.device && sbObj.device.mttr }}min
                          </div>
                          <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w-100p h-100p" />
                        </div>
                        <p class="fz-12 c-B9BCC1 mt-6">故障平均修复时间</p>
                      </div>
                    </div>
                  </div>
                  <div class="n"></div>
                </div>
              </div>
            </div>
            <div class="h-210">
              <base-echarts :options="sbOptions" />
            </div>
          </div>
        </con-box>
      </div>
      <div class="mt-10 dis-f jc-sb">
        <con-box class="pk-con flex-1 h-450" title="品控管理">
          <div class="pl-34 pr-34 pt-16 dis-f jc-sb">
            <div class="w-345">
              <div class="h-170">
                <div class="dis-f pt-16 pl-20 pr-20 jc-sb">
                  <div class="item w-138">
                    <div class="bg-item w-128 h-40 dis-f ai-c jc-c fz-16 c-fff">巡检不良次数</div>
                    <div class="mt-20 w-138 h-102 po-r">
                      <img src="@/assets/images/aqsc_icon_szdk.png" alt="" class="w-100p h-100p" />
                      <div class="po-a text-linear t-20 text-center fz-16 c-70A3EF scale">
                        <span class="fz-24">{{ qualityObj.quality && qualityObj.quality.poorCount }}</span
                        >次
                      </div>
                    </div>
                  </div>
                  <div class="item w-138">
                    <div class="bg-item w-128 h-40 dis-f ai-c jc-c fz-16 c-fff">产线不良品数量</div>
                    <div class="mt-20 w-138 h-102 po-r">
                      <img src="@/assets/images/aqsc_icon_szdk.png" alt="" class="w-100p h-100p" />
                      <div class="po-a text-linear t-20 text-center fz-16 c-70A3EF scale">
                        <span class="fz-24">{{ qualityObj.quality && qualityObj.quality.defectiveNum }}</span
                        >件
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="h-184">
                <base-echarts :options="pkPieOptions" />
              </div>
            </div>
            <div class="w-445 h-210 po-r t-120">
              <div class="quality-management bg-fh">
                <div class="percentage">
                  <div class="icon">
                    <img src="@/assets/images/rect_3.png" alt="" class="img-item" />
                    <img src="@/assets/images/aqsc_icon_fqclzb.png" alt="" class="rotate-fast" />
                  </div>
                  <title-item title="工艺符合率" />
                </div>
                <data-list class="ml-20" :list="gyList" margin="mb-10" />
              </div>
            </div>
            <div class="w-418">
              <div class="h-320">
                <base-echarts :options="pkOptions" />
              </div>
            </div>
          </div>
        </con-box>
        <!-- <con-box class="w-524 h-450" title="能源管理">
          <div class="h-50p">
            <base-echarts :options="nyOptions" />
          </div>
          <div class="h-50p">
            <base-echarts :options="cxOptions" />
          </div>
        </con-box> -->
      </div>
    </div>
    <div class="w-470">
      <con-box class="h-450" title="用能总金额">
        <div class="ta-c fz-16 c-B9BCC1">
          总金额<span class="fz-24 c-fff ml-30 mr-20">{{ ynObj.sumAll }}</span
          >元
        </div>

        <div class="dis-f jc-sb mt-36 pl-60 pr-30 ta-c">
          <div class="item c-B9BCC1 fz-16">
            <div class="w-68 h-83 pic m-0-auto">
              <img src="@/assets/images/cx_icon_zq.png" alt="" class="w-100p h-100p" />
            </div>
            <p class="mb-18">蒸汽总金额</p>
            <p>
              <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.streamSumTotal }}</span
              >元
            </p>
            <p class="mt-20 mb-10">单箱金额</p>
            <p>
              <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.streamSumSingle }}</span
              >元/箱
            </p>
          </div>
          <div class="item c-B9BCC1 fz-16">
            <div class="w-68 h-83 pic m-0-auto">
              <img src="@/assets/images/cx_icon_d.png" alt="" class="w-100p h-100p" />
            </div>
            <p class="mb-18">电总金额</p>
            <p>
              <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.elecSumTotal }}</span
              >元
            </p>
            <p class="mt-20 mb-10">单箱金额</p>
            <p>
              <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.elecSumSingle }}</span
              >元/箱
            </p>
          </div>
          <div class="item c-B9BCC1 fz-16">
            <div class="w-68 h-83 pic m-0-auto">
              <img src="@/assets/images/cx_icon_z.png" alt="" class="w-100p h-100p" />
            </div>
            <p class="mb-18">水总金额</p>
            <p>
              <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.waterSumTotal }}</span
              >元
            </p>
            <p class="mt-20 mb-10">单箱金额</p>
            <p>
              <span class="c-fff mr-10 fz-18 fw-700">{{ ynObj.waterSumSingle }}</span
              >元/箱
            </p>
          </div>
        </div>
      </con-box>

      <con-box class="h-450" title="人效">
        <div class="item pl-30">
          <div class="fz-18 c-fff">
            <img src="@/assets/images/rect.png" alt="" class="sm-icon" />
            人员数量</div>
          <div class="con">
            <div class="dis-f jc-sa">
              <div class="w-81 mt-20">
                <div class="pic po-r w-81 h-71">
                  <img src="@/assets/images/zhcc_icon_cp.png" alt="" class="w-100p h-100p" />
                  <div class="po-a fz-16 t-14 text-center font-num scale">{{ personObj.totalNumber }}</div>
                </div>
                <p class="c-fff fz-14 ta-c">总人数</p>
              </div>
              <div class="">
                <data-list-no-line :list="aqList" />
              </div>
            </div>
          </div>
        </div>
        <div class="item pl-30">
          <div class="fz-18 c-fff">
            <img src="@/assets/images/rect.png" alt="" class="sm-icon" />
            千包总工时
          </div>
          <div class="con dis-f jc-sb">
            <div class="pic w-96 po-r">
              <div class="po-a fz-24 t-14 fw-700 c-fff font-style-italic scale w-100p ta-c">
                {{ personObj.totalhours || 0 }}
              </div>
              <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w_100p h_100p" />
              <p class="fz-12 c-B9BCC1 mt-6 ta-c">总工时</p>
            </div>
            <div class="pic w-96 po-r">
              <div class="po-a fz-24 t-14 fw-700 c-fff font-style-italic scale w-100p ta-c">
                {{ 0.03 }}%
              </div>
              <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w_100p h_100p" />
              <p class="fz-12 c-B9BCC1 mt-6 ta-c">同比</p>
            </div>
            <div class="pic w-96 po-r">
              <div class="po-a fz-24 t-14 fw-700 c-fff font-style-italic scale w-100p ta-c">
                {{ 0.11 }}%
              </div>
              <img src="@/assets/images/sy_icon_mmcz.png" alt="" class="w_100p h_100p" />
              <p class="fz-12 c-B9BCC1 mt-6 ta-c">环比</p>
            </div>
          </div>
        </div>
      </con-box>
      <!-- <con-box class="h-190 mt-10" title="耗资差异率">
        <div class="dis-f jc-sb pl-20 pr-20">
          <div class="item w-134 pl-20 pr-18 ta_c ta_c">
            <p class="fz-16 c-B9BCC1">{{ 0 }}/{{ 0 }}</p>
            <div class="pic w-78 h-58 m-auto">
              <img src="@/assets/images/cx_icon_cyl.png" alt="" class="w-100p h-100p" />
            </div>
            <div class="fz-16 c-B9BCC1 ta-c">蒸汽</div>
          </div>
          <div class="item w-134 pl-20 pr-18 ta_c">
            <p class="fz-16 c-B9BCC1">{{ 0 }}/{{ 0 }}</p>
            <div class="pic w-78 h-58 m-auto">
              <img src="@/assets/images/cx_icon_cyl.png" alt="" class="w-100p h-100p" />
            </div>
            <div class="fz-16 c-B9BCC1 ta-c">电</div>
          </div>
          <div class="item w-134 pl-20 pr-18 ta_c">
            <p class="fz-16 c-B9BCC1">{{ 0 }}/{{ 0 }}</p>
            <div class="pic w-78 h-58 m-auto">
              <img src="@/assets/images/cx_icon_cyl.png" alt="" class="w-100p h-100p" />
            </div>
            <div class="fz-16 c-B9BCC1 ta-c">水</div>
          </div>
        </div>
      </con-box> -->
      <!-- <con-box class="h-314 mt-10" title="波峰平谷">
        <base-select slot="header" v-model="monthSelected" :list="monthList" />
        <base-echarts :options="peakOptions" />
        <img src="@/assets/images/3d_bg.png" alt="" class="d3-bg rotate-center" />
      </con-box> -->
    </div>
  </div>
</template>

<script>
// iui
import { getSevenDays, getRangeRandom, getRangeRandomFloor } from "@/utils/tools";
import {
  lineProduction,
  lineAmount,
  linePersonnel,
  lineQuality,
  lineDevice,
  lineEnergy,
  lineTendency,
  lineUsedDiff,
  lineElectro,
} from "@/api/apis";
import TitleItem from "@/components/TitleItem.vue";
import BaseSelect from "@/components/BaseSelect.vue";
import mixins from "@/mixins/refresh";

function fixed(num) {
  return num.toFixed(1);
}
const barDate = [0, 0, 0, 0];

// -----------------合规性 start---------------------------
var data = [
  {
    name: "首检合格率",
    value: 0,
  },
  {
    name: "品评合格率",
    value: 0,
  },
  {
    name: "抽检合格率",
    value: 0,
  },
];
var titleArr = [],
  seriesArr = [];
var sCenter,
  TitleXy = {};
var colors = [
  ["#46C97D", "#1b2d2f"],
  ["#DC8439", "#1b2d2f"],
  ["#18F8F9", "#1b2d2f"],
  ["#6885D9", "#1b2d2f"],
  ["#FFF189", "#1b2d2f"],
];
data.forEach(function (item, index) {
  sCenter = [index * 35 + 14 + "%", "40%"];
  TitleXy = {
    left: index * 35 + 14 + "%",
    top: "74%",
  };
  titleArr.push({
    text: item.name,
    left: TitleXy.left,
    top: TitleXy.top,
    textAlign: "center",
    textStyle: {
      fontSize: nowSize(14),
      color: "#FFFFFF",
      textAlign: "center",
    },
  });
  seriesArr.push({
    name: item.name,
    type: "pie",
    clockWise: true,
    roundCap: true,
    barWidth: 60,
    radius: [34, 40],
    itemStyle: {
      normal: {
        color: colors[index][0],
        shadowColor: colors[index][0],
        shadowBlur: 0,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    },
    hoverAnimation: false,
    center: sCenter,
    data: [
      {
        value: item.value,
        label: {
          normal: {
            formatter: function (params) {
              return params.value + "%";
            },
            position: "center",
            show: true,
            textStyle: {
              fontSize: nowSize(14),
              fontWeight: "bold",
              fontStyle: "italic",
              color: "#ffffff",
            },
          },
        },
      },
      {
        value: 100 - item.value,
        name: "invisible",
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: colors[index][1],
          },
          emphasis: {
            color: colors[index][1],
          },
        },
      },
    ],
  });
});

// -----------------合规性 end-----------------------

import BaseEcharts from "@/components/BaseEcharts.vue";
import ConBox from "@/components/ConBox.vue";
import { nowSize } from "@/utils/nowSize";
import * as echarts from "echarts";
import DataList from "@/components/DataList.vue";
import DataListNoLine from "../../components/DataListNoLine.vue";
import { getPie3D } from "@/assets/js/3d";
import BarProgress from "@/components/BarProgress.vue";
import "echarts-gl";
export default {
  name: "ProductionManagement",
  mixins: [mixins],
  components: {
    ConBox,
    BaseEcharts,
    BarProgress,
    DataList,
    TitleItem,
    DataListNoLine,
    BaseSelect,
  },
  data() {
    return {
      // fui
      nowDay: getSevenDays(),
      timeList: [
        { label: "日", value: "day" },
        { label: "月", value: "month" },
      ],
      selectedDate: "day",
      energyObj: {},
      qualityObj: {},
      hzObj: {},
      ynObj: {},
      personObj: {},
      production: {},
      quality: {},
      sbObj: {},
      nhObj: {},
      aqList: [
        { label: "职员", value: "0", unit: "人" },
        { label: "自聘作业员", value: "0", unit: "人" },
        { label: "外包", value: "0", unit: "人" },
      ],
      qualityList: [
        { label: "克重机合格品个数", value: "0", unit: "" },
        { label: "生产总个数", value: "0", unit: "" },
      ],
      gyList: [
        { label: "当日工艺符合率", value: "0", unit: "%" },
        { label: "月累计工艺符合率", value: "0", unit: "%" },
        { label: "年累计工艺符合率", value: "0", unit: "%" },
      ],
      sbPieOptions: {
        title: [
          {
            text: "巡检完成率",
            left: "26%",
            top: "74%",
            textAlign: "center",
            textStyle: {
              fontSize: nowSize(14),
              color: "#FFFFFF",
              textAlign: "center",
            },
          },
          {
            text: "异常处理率",
            left: "66%",
            top: "74%",
            textAlign: "center",
            textStyle: {
              fontSize: nowSize(14),
              color: "#FFFFFF",
              textAlign: "center",
            },
          },
        ],
        series: [
          {
            name: "巡检完成率",
            type: "pie",
            clockWise: true,
            roundCap: true,
            barWidth: 60,
            radius: [20, 26],
            itemStyle: {
              normal: {
                color: "#16A5F4",
                shadowColor: "#16A5F4",
                shadowBlur: 0,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            center: ["30%", "40%"],
            data: [
              {
                value: 0,
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value + "%";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: nowSize(14),
                      fontWeight: "bold",
                      fontStyle: "italic",
                      color: "#ffffff",
                    },
                  },
                },
              },
              {
                value: 100,
                name: "invisible",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: "#1b2d2f",
                  },
                  emphasis: {
                    color: "#1b2d2f",
                  },
                },
              },
            ],
          },
          {
            name: "异常处理率",
            type: "pie",
            clockWise: true,
            roundCap: true,
            barWidth: 60,
            radius: [20, 26],
            itemStyle: {
              normal: {
                color: "#FFB508",
                shadowColor: "#FFB508",
                shadowBlur: 0,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            center: ["66%", "40%"],
            data: [
              {
                value: 0,
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value + "%";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: nowSize(14),
                      fontWeight: "bold",
                      fontStyle: "italic",
                      color: "#ffffff",
                    },
                  },
                },
              },
              {
                value: 100,
                name: "invisible",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: "#1b2d2f",
                  },
                  emphasis: {
                    color: "#1b2d2f",
                  },
                },
              },
            ],
          },
        ],
        // tooltip: {
        //   trigger: "item",
        //   formatter: "2021年: {c}人",
        // },
      },
      pkPieOptions: {
        title: titleArr,
        series: seriesArr,
        // tooltip: {
        //   trigger: "item",
        //   formatter: "2021年: {c}人",
        // },
      },
      cxOptions: {
        animation: true,
        tooltip: {
          trigger: "axis",
          formatter: "{b} <br/>{a0} : {c0}",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: true,
          top: 0,
          icon: "rect",
          right: "30%",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 10,
          selectedMode: false, // 是否允许点击
          data: ["产线耗能"],
          textStyle: {
            color: "#fefefe",
            fontSize: nowSize(12),
          },
        },
        grid: {
          left: "5%",
          top: "20%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["1月", "2月", "3月", "4月"],
            axisTick: {},
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(110, 130, 149, 0.30)",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#adceea",
                fontSize: nowSize(14),
              },
            },
            interval: 1,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            data: [],
            axisLine: { show: false },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
          {
            type: "category",
            data: [],
            axisLine: { show: false },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位: 能耗",
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "产线耗能",
            type: "bar",
            barWidth: 12,
            data: barDate,
            z: 1,
            itemStyle: {
              normal: {
                color: "rgba(249, 249, 103, 0.2)",
              },
            },
          },

          // 背景
          {
            name: "",
            type: "bar",
            barWidth: 30,
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "rgba(18, 62, 98, 0.35)",
              },
            },
            data: barDate.map((item) => ({
              itemStyle: {
                decal: {
                  dashArrayX: [20, 0],
                  dashArrayY: [5, 2],
                  rotation: -45,
                },
              },
              value: 100,
            })),
            z: -1,
            xAxisIndex: 1,
          },
          // 顶部亮点
          {
            name: "123",
            stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 12,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
              },
            },
            data: barDate,
          },
          {
            /*这个bar是横线的显示*/
            name: "123",
            stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 12,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "#f9f967",
              },
            },
            data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
          },
        ],
      },
      nyOptions: {
        animation: true,
        tooltip: {
          trigger: "axis",
          formatter: "{b} <br/>{a0} : {c0}<br/>{a1} : {c1}<br/> {a2} : {c2} %",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: true,
          top: 0,
          icon: "rect",
          right: "30%",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 10,
          selectedMode: false, // 是否允许点击
          data: ["用量", "单位用量", "标准比"],
          textStyle: {
            color: "#fefefe",
            fontSize: nowSize(12),
          },
        },
        grid: {
          left: "5%",
          top: "20%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {},
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(110, 130, 149, 0.30)",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#adceea",
                fontSize: nowSize(14),
              },
            },
            interval: 1,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            data: [],
            axisLine: { show: false },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
          {
            type: "category",
            data: [],
            axisLine: { show: false },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位: 能耗",
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "用量",
            type: "bar",
            barWidth: 12,
            data: barDate,
            z: 1,
            itemStyle: {
              normal: {
                color: "rgba(255, 127, 14, 0.2)",
              },
            },
          },
          {
            name: "单位用量",
            type: "bar",
            barWidth: 12,
            itemStyle: {
              normal: {
                color: "rgba(1, 160, 246, 0.2)",
              },
            },
            data: barDate.map((item) => ({
              value: item + 5,
            })),
            z: 1,
          },
          {
            name: "标准比",
            type: "bar",
            barWidth: 12,
            itemStyle: {
              normal: {
                color: "rgba(70, 201, 125, 0.2)",
              },
            },
            data: barDate.map((item) => ({
              value: item + 15,
            })),
            z: 1,
          },

          // 背景
          {
            name: "",
            type: "bar",
            barWidth: 60,
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "rgba(18, 62, 98, 0.35)",
              },
            },
            data: barDate.map((item) => ({
              itemStyle: {
                decal: {
                  dashArrayX: [20, 0],
                  dashArrayY: [5, 2],
                  rotation: -45,
                },
              },
              value: 100,
            })),
            z: -1,
            xAxisIndex: 1,
          },
          // 顶部亮点
          {
            name: "123",
            stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 12,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
              },
            },
            data: barDate,
          },
          {
            /*这个bar是横线的显示*/
            name: "123",
            stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 12,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "#ff7f0e",
              },
            },
            data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
          },

          {
            name: "123",
            stack: "breakevenEleGroup1" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 12,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
              },
            },
            data: barDate.map((item) => ({
              value: item + 5,
            })),
          },
          {
            /*这个bar是横线的显示*/
            name: "123",
            stack: "breakevenEleGroup1" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 12,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "#01a0f6",
              },
            },
            data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
          },
          {
            name: "123",
            stack: "breakevenEleGroup2" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 12,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
              },
            },
            data: barDate.map((item) => ({
              value: item + 15,
            })),
          },
          {
            /*这个bar是横线的显示*/
            name: "123",
            stack: "breakevenEleGroup2" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 12,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "#46c97d",
              },
            },
            data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
          },
        ],
      },
      sbOptions: {
        animation: true,
        tooltip: {
          trigger: "axis",
          formatter: "{b} <br/>{a0} : {c0}<br/>{a1} : {c1}<br/> {a2} : {c2} %",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: true,
          top: 0,
          icon: "rect",
          right: "20%",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 10,
          selectedMode: false, // 是否允许点击
          data: ["故障时间", "实际排产时间", "故障率"],
          textStyle: {
            color: "#fefefe",
            fontSize: nowSize(12),
          },
        },
        grid: {
          left: "5%",
          top: "20%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["1月", "2月", "3月", "4月"],
            axisTick: {},
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(110, 130, 149, 0.30)",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#adceea",
                fontSize: nowSize(14),
              },
            },
            interval: 1,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            data: [],
            axisLine: { show: false },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
          {
            type: "category",
            data: [],
            axisLine: { show: false },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "故障率: %",
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            name: "时间",
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "故障时间",
            type: "bar",
            barWidth: 10,
            data: barDate,
            z: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#709ED1",
                  },
                  {
                    offset: 1,
                    color: "#0C1E2C",
                  },
                ]),
              },
            },
          },
          {
            name: "实际排产时间",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#74D3CC",
                  },
                  {
                    offset: 1,
                    color: "#0C1E2C",
                  },
                ]),
              },
            },
            data: barDate.map((item) => ({
              value: item + 35,
            })),
            z: 1,
          },

          // 背景
          {
            name: "",
            type: "bar",
            barWidth: 40,
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "rgba(18, 62, 98, 0.35)",
              },
            },
            data: barDate.map((item) => ({
              itemStyle: {
                decal: {
                  dashArrayX: [20, 0],
                  dashArrayY: [5, 2],
                  rotation: -45,
                },
              },
              value: 100,
            })),
            z: -1,
            xAxisIndex: 1,
          },

          {
            name: "故障率",
            type: "line",
            showAllSymbol: true,
            lineStyle: {
              color: "#4c6173",
            },
            showSymbol: true,
            symbol:
              "image://",
            symbolSize: 26,
            itemStyle: {
              normal: {
                color: "#f67b0f",
                borderColor: "#f67b0f",
                borderWidth: 1,
              },
            },
            data: ["30", "50", "40", "70"],
            yAxisIndex: 1,
          },
        ],
      },
      pkOptions: {
        animation: true,
        tooltip: {
          trigger: "axis",
          formatter: "{b} <br/>{a1} : {c1} %<br/> {a2} : {c2} %",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: true,
          top: 0,
          icon: "rect",
          right: "0%",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 10,
          data: ["不良品率", "良品率"],
          textStyle: {
            color: "#fefefe",
            fontSize: nowSize(12),
          },
        },
        grid: {
          left: "5%",
          top: "14%",
          bottom: "4%",
          right: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {},
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(110, 130, 149, 0.30)",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#adceea",
                fontSize: nowSize(14),
              },
            },
            interval: 1,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位: %",
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          // 背景
          {
            name: "",
            type: "bar",
            barWidth: 40,
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "rgba(18, 62, 98, 0.35)",
              },
            },
            data: barDate.map((item) => ({
              itemStyle: {
                decal: {
                  dashArrayX: [20, 0],
                  dashArrayY: [5, 2],
                  rotation: -45,
                },
              },
              value: 100,
            })),
            z: -1,
          },
          {
            name: "不良品率",
            type: "line",
            showAllSymbol: true,
            lineStyle: {
              color: "#4c6173",
            },
            showSymbol: true,
            symbol:
              "image://",
            symbolSize: 26,
            itemStyle: {
              normal: {
                color: "#f67b0f",
                borderColor: "#f67b0f",
                borderWidth: 1,
              },
            },
            data: [],
          },
          {
            name: "良品率",
            type: "line",
            showAllSymbol: true,
            lineStyle: {
              color: "#4c6173",
            },
            showSymbol: true,
            symbol:
              "image://",
            symbolSize: 26,
            itemStyle: {
              normal: {
                color: "rgba(172, 213, 152, 1)",
                borderColor: "rgba(172, 213, 152, 1)",
                borderWidth: 1,
              },
            },
            data: [],
          },
        ],
      },
      peakOptions: {
        legend: {
          top: "center",
          left: "60%",
          orient: "vertical",
          icon: "circle",
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontSize: nowSize(14),
            rich: {
              label: {
                color: "#fff",
                padding: [0, 0, 0, 10],
              },
              value: {
                color: "#5fa7d7",
                padding: [0, 0, 0, 30],
              },
            },
          },
        },
        tooltip: {
          show: false,
        },
        // labelLine: {
        //   show: false,
        // },
        // label: {
        //   show: true,
        //   position: "inside",
        //   formatter: "{d}%",
        // },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false,
          boxHeight: nowSize(20),
          boxWidth: nowSize(110),
          left: "-20%",
          viewControl: {
            alpha: 30,
            beta: 0,
            distance: 500, //调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: false, // 自动旋转
          },
        },
        series: [],
      },
      monthSelected: "",
      monthList: [
        // {label:"一月",value:'1'},
        // {label:"二月",value:'2'},
        // {label:"三月",value:'3'},
        // {label:"四月",value:'4'},
        // {label:"五月",value:'5'},
        // {label:"六月",value:'6'},
        // {label:"七月",value:'7'},
        // {label:"八月",value:'8'},
        // {label:"九月",value:'9'},
        // {label:"十月",value:'10'},
        // {label:"十一月",value:'11'},
        // {label:"十二月",value:'12'},
      ],
    };
  },
  computed: {
    throughRate() {
      let result = "";
      const { throughRateDay, throughRateMonth, throughRateYear } = this.quality;
      if (this.selectedDate === "day") {
        result = throughRateDay;
      } else if (this.selectedDate === "month") {
        result = throughRateMonth;
      } else {
        result = throughRateYear;
      }
      return result;
    },
  },
  created() {
    console.log(
      (100 - 0.22).toFixed(2),
      (100 - 0.31).toFixed(2),
      (100 - 0.71).toFixed(2),
      (100 - 0.94).toFixed(2),
      (100 - 0.82).toFixed(2),
      (100 - 0.89).toFixed(2),
      (100 - 0.75).toFixed(2),
    );
    this.initMonthData();
    // 获取query参数
    this.query = this.$route.query;
    this.init();
  },
  watch: {
    selectedDate(newV, oldV) {
      if (oldV === newV) return;
      if (newV === "day") {
        // 日
        this.qualityList = [
          { label: "克重机合格品个数", value: this.quality.productionDay, unit: "" },
          { label: "生产总个数", value: this.quality.rawProductionDay, unit: "" },
        ];
      } else if (newV === "month") {
        // 月
        this.qualityList = [
          { label: "克重机合格品个数", value: this.quality.productionMonth, unit: "" },
          { label: "生产总个数", value: this.quality.rawProductionMonth, unit: "" },
        ];
      } else {
        // 年
        this.qualityList = [
          { label: "克重机合格品个数", value: this.quality.productionYear, unit: "" },
          { label: "生产总个数", value: this.quality.rawProductionYear, unit: "" },
        ];
      }
    },
    monthSelected(newV) {
      this.lineElectro();
    },
  },
  methods: {
    // hui
    init() {
      this.lineProduction();
      this.lineDevice();
      this.linePersonnel();
      this.lineAmount();
      this.lineUsedDiff();
      this.lineQuality();
      this.lineEnergy();
      this.lineElectro();
    },
    toMoney(num, isTenThousand) {
      if (!num) return "0";
      if (isNaN(Number(num))) {
        // 如果不是个数字, 去掉,
        num = num.replaceAll(",", "");
      }
      if (isTenThousand) {
        num = +num / 10000;
      }
      if (+num > 9999.999999) return Math.floor(+num).toLocaleString();
      num = Math.floor(+num * 100) / 100;
      num = (+num).toLocaleString();
      let dotIndex = num.indexOf(".");
      if (dotIndex === -1) num = num + "";
      if (dotIndex === num.length - 3) num;
      if (dotIndex === num.length - 2) num = num + "";
      return num;
    },
    // 初始化月份选择
    initMonthData() {
      const date = new Date();
      const year = date.getFullYear();
      const currentMonth = date.getMonth() + 1;
      this.monthSelected = year + `-${currentMonth}`;

      this.monthList = [
        { label: "一月", value: year + "-1" },
        { label: "二月", value: year + "-2" },
        { label: "三月", value: year + "-3" },
        { label: "四月", value: year + "-4" },
        { label: "五月", value: year + "-5" },
        { label: "六月", value: year + "-6" },
        { label: "七月", value: year + "-7" },
        { label: "八月", value: year + "-8" },
        { label: "九月", value: year + "-9" },
        { label: "十月", value: year + "-10" },
        { label: "十一月", value: year + "-11" },
        { label: "十二月", value: year + "-12" },
      ];
    },

    /**
     * 24小时用电峰谷
     * @param name 描述信息
     */
    async lineElectro() {
      let { code, data } =
        (await lineElectro({
          ...this.query,
          month: this.monthSelected,
        }).catch((err) => {
          err;
        })) || {};
      if (code === 200) {
        const optionsData = [
          {
            name: "波",
            value: data.electroJf && +data.electroJf.slice(0, -1),
            itemStyle: {
              color: "#00D7E9",
            },
          },
          {
            name: "峰",
            value: data.electroFd && +data.electroFd.slice(0, -1),
            itemStyle: {
              color: "#5DCCFE",
            },
          },
          {
            name: "平",
            value: data.electroPd && +data.electroPd.slice(0, -1),
            itemStyle: {
              color: "#68B7E7",
            },
          },
          {
            name: "谷",
            value: data.electroGd && +data.electroGd.slice(0, -1),
            itemStyle: {
              color: "#34D492",
            },
          },
        ];

        const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);

        series.push({
          name: "pie2d",
          type: "pie",
          label: {
            show: true,
            formatter: "{d}%",
            opacity: 1,
            fontSize: 14,
            position: "inside",
            color: "#fff",
          },
          labelLine: {
            show: false,
          },
          startAngle: 70, //起始角度，支持范围[0, 360]。
          clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
          radius: ["40%", "25%"],
          center: ["32%", "50%"],
          data: optionsData,
          itemStyle: {
            opacity: 0,
          },
        });
        this.peakOptions.series = series;
        const { electroJfValue, electroPdValue, electroFdValue, electroGdValue } = data;
        this.peakOptions.legend.formatter = (name) => {
          let obj = {
            波: electroJfValue,
            平: electroPdValue,
            峰: electroFdValue,
            谷: electroGdValue,
          };
          if (!obj[name]) obj[name] = 0;
          return `{label|${name}}{value|${obj[name]}kwh}`;
        };
      }
    },

    /**
     * 耗资差异率
     * @param name 描述信息
     */
    async lineUsedDiff() {
      let { code, data } =
        (await lineUsedDiff({
          ...this.query,
        }).catch((err) => {
          err;
        })) || {};
      if (code === 200) {
        this.hzObj = data;
      }
    },

    /**
     * 用能总金额
     * @param name 描述信息
     */
    async lineAmount() {
      let { code, data } =
        (await lineAmount({
          ...this.query,
        }).catch((err) => {
          err;
        })) || {};
      if (code === 200) {
        this.ynObj = data;
      }
    },

    /**
     * 生产管理
     * @param name 描述信息
     */
    async lineProduction() {
      let day = new Date();
      let dayRadio = (day.getHours() - 7) / 12 > 1 ? 1 : (day.getHours() - 7) / 12;
      let dayNumRadio = day.getDate() / 31;
      // let { code, data } =
      //   (await lineProduction({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      let code = 200,
        data = {
          桶面一产线: {
            production: {
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              id: 1,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              activeYearOut: "1000",
              activeMonthlyOut: (dayNumRadio * 728000).toFixed(),
              activeDayOut: (dayRadio * 28000).toFixed(),
              plannedOutputNumMonth: "728000",
              plannedOutputNum: "28000",
              dailyProductivity: fixed(dayRadio * 100),
              monthlyProductivity: fixed(dayNumRadio * 100),
              totalhours: "800",
            },
            quality: {
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: "2023-10-20 18:57:12",
              remark: null,
              id: 3,
              recordDate: null,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              throughRateDay: "99.7",
              productionDay: (dayRadio * 28000).toFixed(),
              rawProductionDay: ((dayRadio * 28000) / 0.997).toFixed(),
              throughRateMonth: "99.7623",
              productionMonth: (dayNumRadio * 728000).toFixed(),
              rawProductionMonth: ((dayNumRadio * 728000) / 0.997).toFixed(),
              throughRateYear: "50",
              productionYear: "16",
              rawProductionYear: "400",
              qualifiedNumber: "200",
              produceNumber: "200",
              throughRate: "30",
            },
          },
          桶面二产线: {
            production: {
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              id: 1,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              activeYearOut: "1000",
              activeMonthlyOut: ((dayNumRadio * 31 - 1) * 49500 + +fixed(dayRadio * 12 * 2200)).toFixed(),
              activeDayOut: (dayRadio * 12 * 2200).toFixed(),
              plannedOutputNumMonth: (dayNumRadio * 31 * 49500).toFixed(),
              plannedOutputNum: "24750",
              dailyProductivity: "98.5",
              monthlyProductivity: "98.1",
              totalhours: "800",
            },
            quality: {
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: "2023-10-20 18:57:12",
              remark: null,
              id: 3,
              recordDate: null,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              throughRateDay: "99.7",
              productionDay: (dayRadio * 12 * 2200).toFixed(),
              rawProductionDay: ((dayRadio * 12 * 2200) / 0.997).toFixed(),
              throughRateMonth: "99.73",
              productionMonth: ((dayNumRadio * 31 - 1) * 49500 + +fixed(dayRadio * 12 * 2200)).toFixed(),
              rawProductionMonth: (((dayNumRadio * 31 - 1) * 49500 + +fixed(dayRadio * 12 * 2200)) / 0.997).toFixed(),
              throughRateYear: "50",
              productionYear: "16",
              rawProductionYear: "400",
              qualifiedNumber: "200",
              produceNumber: "200",
              throughRate: "30",
            },
          },
        };
      if (code === 200) {
        this.production = data[this.query.lineName].production;
        this.quality = data[this.query.lineName].quality;

        // this.$set(this.production, "dailyProductivity", (dayRadio * 100).toFixed());
        // this.$set(this.production, "activeDayOut", (dayRadio * 28000).toFixed());
        // this.$set(this.production, "monthlyProductivity", (dayNumRadio * 100).toFixed());
        // this.$set(this.production, "activeMonthlyOut", (dayNumRadio * 728000).toFixed());
        // this.$set(this.production, "activeYearOut", 487.8 + +this.production.activeMonthlyOut);

        // 日
        this.qualityList = [
          { label: "克重机合格品个数", value: this.quality.productionDay, unit: "" },
          { label: "生产总个数", value: this.quality.rawProductionDay, unit: "" },
        ];
      }
    },
    /**
     * 人效管理
     * @param name 描述信息
     */
    async linePersonnel() {
      // let { code, data } =
      //   (await linePersonnel({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      // if (code === 200) {
      let data = {
        桶面一产线: {
          personnel: {
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            remark: null,
            id: 3,
            factoryName: "杭州顶益工厂",
            workshopName: "制面一车间",
            lineName: "桶面二产线",
            totalNumber: 26,
            clerkNumber: 3,
            securityStaffNumber: 20,
            outsourceNumber: 3,
            entryNumber: 49,
            departNumber: 1,
          },
          totalhours: "0.8KB/H",
        },
        桶面二产线: {
          personnel: {
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            remark: null,
            id: 3,
            factoryName: "杭州顶益工厂",
            workshopName: "制面一车间",
            lineName: "桶面二产线",
            totalNumber: 30,
            clerkNumber: 3,
            securityStaffNumber: 27,
            outsourceNumber: 3,
            entryNumber: 49,
            departNumber: 1,
          },
          totalhours: "0.8KB/H",
        },
      };
      data = data[this.query.lineName];
      this.personObj = {
        ...data.personnel,
        totalhours: data.totalhours,
      };
      this.aqList = [
        { label: "职员", value: this.personObj.clerkNumber, unit: "人" },
        { label: "自聘作业员", value: this.personObj.securityStaffNumber, unit: "人" },
        { label: "外包", value: this.personObj.outsourceNumber, unit: "人" },
      ];
      // }
    },
    /**
     * 品控管理
     * @param name 描述信息
     */
    async lineQuality() {
      let { code, data } =
        (await lineQuality({
          ...this.query,
        }).catch((err) => {
          err;
        })) || {};
      if (code === 200) {
        this.qualityObj = data;
        let quality = { ...this.qualityObj.quality };
        let arr = ["firstPassRate", "evaluationPassRate", "checkRate"];
        if (this.query.lineName == "桶面二产线") {
          quality = {
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            remark: null,
            id: 1,
            factoryName: "杭州顶益工厂",
            workshopName: "制面一车间",
            lineName: "桶面二产线",
            defectiveNum: "1275",
            firstPassRate: "99",
            evaluationPassRate: "99",
            poorCount: "2",
            processConformityRate: "50",
            checkRate: "99",
            numbeComplaints: "100",
            complaintRate: "20",
            grantComplaintRate: "30",
            conformDay: "98.9",
            conformMonth: "99.3",
            conformYear: "99.3",
          };
        }
        this.pkPieOptions.series.forEach((item, index) => {
          item.data[0].value = quality[arr[index]];
          item.data[1].value = 100 - quality[arr[index]];
        });

        this.gyList = [
          { label: "当日工艺符合率", value: quality.conformDay, unit: "%" },
          { label: "月累计工艺符合率", value: quality.conformMonth, unit: "%" },
          { label: "年累计工艺符合率", value: quality.conformYear, unit: "%" },
        ];

        // 折线图
        let defectRadioArr = this.qualityObj.productRateList.map((item) => item.defectRadio);
        let qualifiedRadioArr = this.qualityObj.productRateList.map((item) => item.qualifiedRadio);
        if (this.query.lineName == "桶面二产线") {
          let productRateList = [
            {
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: "2023-10-04 14:30:20",
              remark: null,
              id: 14,
              recordDate: this.nowDay[0],
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              defect: "500",
              defectBudget: "1098",
              defectRadio: "0.22",
              qualifiedRadio: "99.78",
            },
            {
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: "2023-10-04 14:30:20",
              remark: null,
              id: 15,
              recordDate: this.nowDay[1],
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              defect: "546",
              defectBudget: "986",
              defectRadio: "0.31",
              qualifiedRadio: "99.69",
            },
            {
              createBy: null,
              createTime: "2023-10-20 15:13:32",
              updateBy: null,
              updateTime: null,
              remark: null,
              id: 23,
              recordDate: this.nowDay[2],
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              defect: "0",
              defectBudget: "0",
              defectRadio: "0.71",
              qualifiedRadio: "99.29",
            },
            {
              createBy: null,
              createTime: "2023-10-20 17:03:27",
              updateBy: null,
              updateTime: null,
              remark: null,
              id: 25,
              recordDate: this.nowDay[3],
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              defect: "0",
              defectBudget: "0",
              defectRadio: "0.94",
              qualifiedRadio: "99.06",
            },
            {
              createBy: null,
              createTime: "2023-10-20 17:08:19",
              updateBy: null,
              updateTime: null,
              remark: null,
              id: 27,
              recordDate: this.nowDay[4],
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              defect: "0",
              defectBudget: "0",
              defectRadio: "0.82",
              qualifiedRadio: "99.18",
            },
            {
              createBy: null,
              createTime: "2023-10-20 17:18:28",
              updateBy: null,
              updateTime: null,
              remark: null,
              id: 29,
              recordDate: this.nowDay[5],
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              defect: "0",
              defectBudget: "0",
              defectRadio: "0.89",
              qualifiedRadio: "99.11",
            },
            {
              createBy: null,
              createTime: "2023-10-20 17:18:28",
              updateBy: null,
              updateTime: null,
              remark: null,
              id: 29,
              recordDate: this.nowDay[6],
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              defect: "0",
              defectBudget: "0",
              defectRadio: "0.75",
              qualifiedRadio: "99.25",
            },
          ];
          defectRadioArr = productRateList.map((item) => item.defectRadio);
          qualifiedRadioArr = productRateList.map((item) => item.qualifiedRadio);
        }
        let max = Math.max(...defectRadioArr, ...qualifiedRadioArr);
        // 对x轴进行赋值
        this.pkOptions.xAxis[0].data = this.qualityObj.productRateList.map((item) => {
          return item.recordDate;
        });
        // this.pkOptions.series[1].data = defectRadioArr;
        this.pkOptions.series[1].data = defectRadioArr;
        this.pkOptions.series[2].data = qualifiedRadioArr;
        this.pkOptions.series[0].data = defectRadioArr.map((item) => ({
          itemStyle: {
            decal: {
              dashArrayX: [20, 0],
              dashArrayY: [5, 2],
              rotation: -45,
            },
          },
          value: 100,
        }));
      }
    },

    /**
     * 设备管理
     * @param name 描述信息
     */
    async lineDevice() {
      // let { code, data } =
      //   (await lineDevice({
      //     ...this.query,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      // if (code === 200) {
      let data = {
        桶面一产线: {
          faultList: [
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 2,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[1],
              name: "线2",
              failureRate: "10",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 3,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[2],
              name: "线3",
              failureRate: "50",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 4,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[3],
              name: "线4",
              failureRate: "40",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 5,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[4],
              name: "线5",
              failureRate: "70",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 6,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[5],
              name: "线6",
              failureRate: "50",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-01 20:07:43",
              updateBy: null,
              updateTime: "2023-10-03 23:44:52",
              remark: null,
              id: 1,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[6],
              name: "线1",
              failureRate: "20",
              productionTime: "10",
              failureTime: "20",
            },
          ],
          device: {
            createBy: null,
            createTime: "2023-10-05 10:15:06",
            updateBy: null,
            updateTime: null,
            remark: null,
            id: 2,
            factoryName: "杭州顶益工厂",
            workshopName: "制面一车间",
            lineName: "桶面二产线",
            devicesAll: "1000",
            devicesNormal: "200",
            devicesOffline: "60",
            startupProgress: "68",
            timeRate: "21",
            performanceRate: "66",
            faultRate: "1.37",
            setsinuse: "90",
            guzhRate: "12",
            faultTime: "9.28分钟/班.线",
            schedulingTime: "11.25小时/班",
            exceptionRate: "87.5",
            mtbf: "80",
            mttr: "90",
            patrolRate: "90.16",
          },
        },
        桶面二产线: {
          faultList: [
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 2,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[1],
              name: "线2",
              failureRate: "10",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 3,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[2],
              name: "线3",
              failureRate: "50",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 4,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[3],
              name: "线4",
              failureRate: "40",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 5,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[4],
              name: "线5",
              failureRate: "70",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-03 23:44:28",
              updateBy: null,
              updateTime: "2023-10-03 23:44:57",
              remark: null,
              id: 6,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[5],
              name: "线6",
              failureRate: "50",
              productionTime: "10",
              failureTime: "20",
            },
            {
              createBy: null,
              createTime: "2023-10-01 20:07:43",
              updateBy: null,
              updateTime: "2023-10-03 23:44:52",
              remark: null,
              id: 1,
              factoryName: "杭州顶益工厂",
              workshopName: "制面一车间",
              lineName: "桶面二产线",
              recordDate: this.nowDay[6],
              name: "线1",
              failureRate: "20",
              productionTime: "10",
              failureTime: "20",
            },
          ],
          device: {
            createBy: null,
            createTime: "2023-10-05 10:15:06",
            updateBy: null,
            updateTime: null,
            remark: null,
            id: 2,
            factoryName: "杭州顶益工厂",
            workshopName: "制面一车间",
            lineName: "桶面二产线",
            devicesAll: "1000",
            devicesNormal: "200",
            devicesOffline: "60",
            startupProgress: "68",
            timeRate: "21",
            performanceRate: "66",
            faultRate: "1.37",
            setsinuse: "90",
            guzhRate: "12",
            faultTime: "9.28分钟/班.线",
            schedulingTime: "11.25小时/班",
            exceptionRate: "82.5",
            mtbf: "57",
            mttr: "17.6",
            patrolRate: "91.27",
          },
        },
      };
      this.sbObj = data[this.query.lineName];
      data = data[this.query.lineName];

      this.sbPieOptions.series[0].data[0].value = data.device.patrolRate;
      this.sbPieOptions.series[0].data[1].value = 100 - data.device.patrolRate;
      this.sbPieOptions.series[1].data[0].value = data.device.exceptionRate;
      this.sbPieOptions.series[1].data[1].value = 100 - data.device.exceptionRate;

      let failureTimeArr = data.faultList.map((item) => item.failureTime);
      let productionTimeArr = data.faultList.map((item) => item.productionTime);
      let failureRateArr = data.faultList.map((item) => item.failureRate);
      let recordDateArr = data.faultList.map((item) => item.recordDate);
      let failureTimeMax = Math.max(...failureTimeArr);
      let productionTimeMin = Math.min(...productionTimeArr);

      this.sbOptions.series[0].data = failureTimeArr;
      this.sbOptions.series[1].data = productionTimeArr;

      this.sbOptions.series[2].data = failureTimeArr.map((item) => ({
        itemStyle: {
          decal: {
            dashArrayX: [20, 0],
            dashArrayY: [5, 2],
            rotation: -45,
          },
        },
        value: 100,
      }));
      this.sbOptions.series[3].data = failureRateArr;
      this.sbOptions.xAxis[0].data = recordDateArr;
      // }
    },
    /**
     * 能源管理
     * @param name 描述信息
     */
    async lineEnergy() {
      let { code, data } =
        (await lineEnergy({
          ...this.query,
        }).catch((err) => {
          err;
        })) || {};
      if (code === 200) {
        this.energyObj = data.energy;
        // energyLines.dosage

        let x1 = data.energyLines.map((item) => item.recordDate);
        let y1 = data.energyLines.map((item) => item.dosage);
        let y2 = data.energyLines.map((item) => item.dosageUnit);
        let y3 = data.energyLines.map((item) => item.standardRadio);
        let max = Math.max(...y1, ...y2, ...y3);
        this.nyOptions.xAxis[0].data = x1;
        this.nyOptions.xAxis[1].data = x1;
        this.nyOptions.xAxis[2].data = x1;
        this.nyOptions.series[0].data = y1;
        this.nyOptions.series[1].data = y2;
        this.nyOptions.series[2].data = y3;
        this.nyOptions.series[3].data = y2.map((item) => ({
          itemStyle: {
            decal: {
              dashArrayX: [20, 0],
              dashArrayY: [5, 2],
              rotation: -45,
            },
          },
          value: max + 100,
        }));
        this.nyOptions.series[4].data = y1;
        this.nyOptions.series[5].data = data.energyLines.map((item) => max / 75);
        this.nyOptions.series[6].data = y2;
        this.nyOptions.series[7].data = data.energyLines.map((item) => max / 75);
        this.nyOptions.series[8].data = y3;
        this.nyOptions.series[9].data = data.energyLines.map((item) => max / 75);

        // 产线耗能
        let hnx1 = data.energyDays.map((item) => item.lineName);
        let hny1 = data.energyDays.map((item) => item.consumption);
        let hnMax = Math.max(...hny1);

        this.cxOptions.xAxis[0].data = hnx1;
        this.cxOptions.xAxis[1].data = hnx1;
        this.cxOptions.xAxis[2].data = hnx1;
        this.cxOptions.series[0].data = hny1;
        this.cxOptions.series[1].data = hny1.map((item) => ({
          itemStyle: {
            decal: {
              dashArrayX: [20, 0],
              dashArrayY: [5, 2],
              rotation: -45,
            },
          },
          value: hnMax + 100,
        }));
        this.cxOptions.series[2].data = hny1;
        this.cxOptions.series[3].data = data.energyDays.map((item) => hnMax / 75);

        // this.nyOptions.xAxis= data.energyLines.map(item=>item.recordDate)
        // this.nyOptions.series[0].data = data.energyLines.map(item=>item.dosage)
        // this.nyOptions.series[1].data = data.energyLines.map(item=>item.dosageUnit)
        // this.nyOptions.series[2].data = data.energyLines.map(item=>item.standardRadio)
      }
    },

    /**
     * 能耗趋势
     * @param name 描述信息
     */
    async lineTendency() {
      let { code, data } =
        (await lineTendency({
          ...this.query,
        }).catch((err) => {
          err;
        })) || {};
      if (code === 200) {
      }
    },
  },
};
</script>

<style scoped lang="scss">
// jui
.text-center {
  width: 100%;
  text-align: center;
}
.w-854 {
  width: 854px;
}
.h-210 {
  height: 210px;
}
.h-320 {
  height: 320px;
}
.t-120 {
  top: 120px;
}
.w-445 {
  width: 445px;
}
.productionManagement {
  background-color: rgba(5, 31, 65, 0.8);
  .pk-con {
    background: linear-gradient(0deg, rgba(6, 15, 25, 0.91), rgba(20, 25, 32, 0));
  }
  .font-num {
    font-weight: bold;
    font-style: italic;
    background-image: -webkit-linear-gradient(bottom, #ffffff, #14a9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.quality-management {
  padding: 0 20px;
  display: flex;
  align-items: center;
  ::v-deep {
    .title-con {
      width: 106px;
    }
  }
  .value {
    position: relative;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 106px;
    height: 106px;
    background-size: 100%;
    span:nth-child(2) {
      font-size: 28px;
      color: #fff;
    }
    .unit {
      font-size: 20px;
      font-family: Microsoft YaHei;
      color: #ffffff;
      opacity: 0.53;
    }
    img {
      position: absolute;
      z-index: -10;
      width: 100%;
    }
  }
}
.bg-item {
  background: url("~@/assets/images/aqsc_icon_zxk.png") no-repeat;
  background-size: 100% 100%;
}
.text-linear {
  background: linear-gradient(179deg, rgba(112, 163, 239, 0.77) 0%, rgba(255, 255, 255, 0.77) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-style: italic;
}
.bg-fh {
  .icon {
    position: relative;
  }
  .rotate-fast {
    width: 117px;
    height: 117px;
  }
  .img-item {
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 71px;
    height: 71px;
  }
}
.production-top {
  padding: 20px;
  text-align: center;
  .data {
    margin-right: 30px;
  }
  .value {
    font-size: 18px;
  }
  .label {
    font-size: 14px;
    color: #7bbff2;
  }
  .top {
    padding-bottom: 5px;
    position: relative;
    &::after {
      position: absolute;
      content: "";
      left: "50%";
      transform: translate(-50%);
      bottom: -3px;
      width: 43px;
      height: 2px;
      background: linear-gradient(244deg, rgba(42, 67, 86, 0) 0%, rgba(42, 67, 86, 1) 50%, rgba(42, 67, 86, 0) 100%);
    }
  }
  .bottom {
    padding-top: 5px;
  }
  .data-right {
    .label {
      color: #4ee38c;
    }
  }
}
::v-deep {
  .detail {
    .item {
      margin-bottom: 4px;
    }
  }
}

.d3-bg {
  width: 217px;
  position: absolute;
  top: 55%;
  left: 7%;
}
.text-align {
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
</style>
